<template>
  <div>
    <div class="appBox">
      <div class="top flex_sb">
        <div class="flex left">
          <div class="cup flex"
               @click="$router.go(-1)">
            <el-icon size="18">
              <Back />
            </el-icon>
            <div class="ruturn">返回</div>
          </div>
          <div class="title">查看资料</div>
        </div>
        <div>
          <!-- <el-button v-preventReClick type="primary"
                     @click="submit(ruleFormRef)">
            保 存
          </el-button> -->
        </div>
      </div>
      <div class="formBox">
        <!-- <div class="f18 fb mt30">
          查看资料
        </div> -->
        <div class="flex_sb flex-wrap f16">
          <div class="w48 mt20 flex">
            <div>&emsp;&emsp;姓名</div>
            ：{{userData.name}}
          </div>
          <div class="w48 mt20 flex">
            <div>&emsp;&emsp;年龄</div>
            ：{{userData.age}}
          </div>
          <div class="w48 mt20 flex">
            <div>所在城市</div>
            ：{{userData.resideProvinceId}}{{ userData.resideCityId }}{{ userData.resideAreaId}}
          </div>
          <div class="w48 mt20 flex">
            <div>&emsp;&emsp;工龄</div>
            ：{{userData.workExperience}}
          </div>
          <div class="w48 mt20 flex">
            <div>联系电话</div>
            ：{{userData.phone}}
          </div>
          <div class="w48 mt20 flex">
            <div>当前状态</div>
            ： <span v-if="userData.typeStatus=='0'">待入职</span>
            <span v-if="userData.typeStatus=='1'">在职</span>
            <span v-if="userData.typeStatus=='2'">离职</span>
          </div>
          <div class="w48 mt20 flex">
            <div>上级用户</div>
            ：{{userData.fatherPhone}}
          </div>
          <div class="w48 mt20 flex">
            <div>注册时间</div>
            ：{{userData.createdAt}}
          </div>

        </div>
        <div class="f18 fb mt30">
          打卡日历
        </div>

      </div>
      <el-table border
                class="mt20 tableBox"
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{ color: '#000' }"
                v-loading="loading">

        <el-table-column prop="sex"
                         label="性别"
                         width="100"
                         show-overflow-tooltip
                         align="center">
          <template #default="scope">
            <span v-if="scope.row.status == 0 ">休假</span>
            <span v-if="scope.row.status == 1 ">打卡</span>
            <span v-if="scope.row.status == 2 ">离职</span>
            <span v-if="scope.row.status == 3 ">未到岗</span>
          </template>
        </el-table-column>
        <el-table-column prop="dayTime"
                         label=""
                         width="180"
                         show-overflow-tooltip
                         align="center" />
        <el-table-column prop="companyName"
                         label=""
                         show-overflow-tooltip
                         align="left">
          <template #default="scope">
            {{ scope.row.childCompanyName ? scope.row.childCompanyName : scope.row.companyName}}
          </template>
        </el-table-column>
        <el-table-column prop="positionName"
                         label=""
                         show-overflow-tooltip
                         align="left" />
      </el-table>
      <div class="pagination">
        <el-pagination background
                       v-model:current-page="params.pageNum"
                       v-model:page-size="params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="totalSize"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      drawerData: {},
      userData: {},
      tableData: [],
      totalSize: 0,
      params: {
        pageNum: 1,
        pageSize: 10,
        workId: this.$route.query.id,
      },
    }
  },
  mounted () {
    this.getDataList()
    this.getUserData()
  },
  methods: {
    getUserData () {
      this.$get('sys/companystaff/platCompanyCtaffWorkInfo?workId=' + this.$route.query.id).then(res => {
        this.userData = res.data
      })
    },
    getDataList () {
      this.loading = true;
      this.$post("sys/companystaff/platClockPageInfo", this.params)
        .then((res) => {
          console.log(res);
          if (res.data) {
            this.tableData = res.data.list;
            this.totalSize = res.data.total;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //分页变化
    handleSizeChange () {
      this.params.pageNum = 1;
      this.getDataList();
    },
    //表格翻页
    handleCurrentChange () {
      this.getDataList();
    },
  }
}
</script>

<style lang="scss" scoped>
.top {
  .ruturn {
    color: rgba(121, 121, 121, 1);
    font-size: 16px;
    position: relative;
    margin-left: 10px;
    margin-top: -2px;
  }
  .ruturn::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 4px;
    width: 1px;
    height: 16px;
    background: rgba(121, 121, 121, 0.8);
  }
  .left {
    align-items: center;
  }
  .title {
    color: rgb(83, 83, 83);
    font-size: 16px;
    margin-left: 40px;
    font-weight: bold;
  }
}
::v-deep(.el-table__header-wrapper) {
  display: none;
}
.tableBox {
  width: 800px !important;
  margin: 0 auto;
  margin-top: 20px;
}
.formBox {
  width: 800px;
  margin: 0 auto;
}
.pagination {
  width: 800px !important;
  margin: 0 auto;
  margin-top: 20px;
  margin-top: 20px;
  height: 50px;
  display: flex;
  justify-content: flex-end;
}
</style>